<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>Matrix - Responsive Tile-Based Template</title>
<link href="style.css" title="style" rel="stylesheet" type="text/css" />
<link id="clink" href="css/style-blue.css" title="style" rel="stylesheet" type="text/css" media="screen" />
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="scripts/jquery.masonry.min.js" type="text/javascript"></script>
<script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="scripts/MetroJs.lt.js" type="text/javascript"></script>
<script src="scripts/jquery.fancybox-1.3.4.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/jquery.flexslider-min.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/hoverintent.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/organictabs.jquery.js" type="text/javascript" charset="utf-8"></script>
<!--[if lt IE 9]>
  <style type="text/css">
  @import url("style-ie8.css");
  </style>
  <script src="scripts/css3-mediaqueries.js" type="text/javascript" charset="utf-8"></script>
  <script>
    document.createElement('header');
    document.createElement('nav');
    document.createElement('section');
    document.createElement('article');
    document.createElement('aside');
    document.createElement('footer');
    document.createElement('hgroup');
    </script>
<![endif]-->
<script src="scripts/javascript.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<div id="bodypat">
<section id="container">
    <div id="colorchanger">
    <a href="?theme=blue" class="cblue cbox" title="Blue Theme"><span class="blue">Blue</span></a>
    <a href="?theme=red" class="cred cbox" title="Red Theme"><span class="red">Red</span></a>
    <a href="?theme=green" class="cgreen cbox" title="Green Theme"><span class="green">Green</span></a>
    <a href="?theme=magenta" class="cmagenta cbox" title="Magenta Theme"><span class="magenta">Magenta</span></a>
    <a href="?theme=purple" class="cpurple cbox" title="Purple Theme"><span class="purple">Purple</span></a>
    <a href="?theme=teal" class="cteal cbox" title="Teal Theme"><span class="teal">Teal</span></a>
    <a href="?theme=lime" class="clime cbox" title="Lime Theme"><span class="lime">Lime</span></a>
    <a href="?theme=brown" class="cbrown cbox" title="Brown Theme"><span class="brown">Brown</span></a>
    <a href="?theme=pink" class="cpink cbox" title="Pink Theme"><span class="pink">Pink</span></a>
    <a href="?theme=mango" class="cmango cbox" title="Mango Theme"><span class="mango">Mango</span></a>
    <h4>Theme Color Selector</h4>
    </div>
<!-- BEGIN HEADER -->
<header class="clearfix">
<!-- BEGIN LOGO -->
<a id="headerlink" href="#" title="home"><img id="logo" src="images/logo.png" alt="logo" /><span id="sitename">Matrix</span></a>
<!-- END LOGO -->

<!-- BEGIN NAVIGATION -->
<nav>
<ul id="nav" class="clearfix">
<!-- Menu Item 1 -->
	<li><a href="index.html" title="Home"><span>Home</span></a></li>
<!-- Menu Item 2 -->
    <li>
    	<a href="#" title="Portfolio"><span>Portfolio</span></a>
        <ul>
        	<li><a href="portfoliotile-large.html" title="Portfolio"><span>Tile - Large</span></a></li>
            <li><a href="portfoliotile-medium.html" title="Portfolio"><span>Tile - Medium</span></a></li>
            <li><a href="portfoliotile-small.html" title="Portfolio"><span>Tile - Small</span></a></li>
            <li><a href="portfoliolist.html" title="Portfolio"><span>Portfolio List</span></a></li>
            <li><a href="singleportfolio.html" title="Portfolio"><span>Single Item</span></a></li>
        </ul>
    </li>
<!-- Menu Item 3 -->
    <li><a href="#" title="Blog"><span>Blog</span></a>
    	<ul>
        	<li><a href="blogtile-large.html" title="Blog"><span>Tile - Large</span></a></li>
            <li><a href="blogtile-medium.html" title="Blog"><span>Tile - Medium</span></a></li>
        	<li><a href="bloglist.html" title="Blog List"><span>Blog List</span></a></li>
        	<li><a href="singleblogpost-1.html" title="Article 1"><span>Single Post</span></a></li>
        </ul>
    </li>
<!-- Menu Item 4 -->
    <li>
    	<a href="#" title="Features"><span>Features</span></a>
        <ul>
        	<li><a href="features-main.html" title="Features"><span>Main Features</span></a></li>
            <li><a href="features-columns.html" title="Features"><span>Columns</span></a></li>
            <li><a href="features-content.html" title="Features"><span>Content Area</span></a></li>
        </ul>
    </li>
<!-- Menu Item 5 -->
    <li><a href="aboutus.html" title="About"><span>About</span></a></li>
<!-- Menu Item 6 -->
    <li class="current"><a href="contact.html" title="Contact"><span>Contact</span></a></li>
</ul>
</nav>
<!-- END NAVIGATION -->
</header>
<!-- END HEADER -->

<!-- BEGIN CONTENT -->
<section id="content" class="clearfix">
<!-- Title --><div id="content-title">Contact Us</div>

<!-- BEGIN PAGE -->
<section id="page">
<div id="page-img">
<img src="images/pages/contact.jpg" alt="Contact Us" />

<div id="contact-location">
<div class="location">
<h5>London</h5>
Unit 123, Grand Building<br />
Tyssen St<br />
E8 2LY London<br />
United Kingdom
<a href="https://maps.google.com/maps?q=London,+United+Kingdom&hl=en&ll=51.50746,-0.127716&spn=0.344466,0.617294&sll=40.714346,-74.005966&sspn=0.026218,0.038581&oq=london&t=h&hnear=London,+United+Kingdom&z=11"><span class="gmap"></span></a>
</div>

<div class="location">
<h5>New York</h5>
Unit 123, Tall Building<br />
Center St<br />
12345 NY<br />
United States
<a href="https://maps.google.com/maps?q=New+York,+NY,+United+States&hl=en&ll=40.714346,-74.005966&spn=0.026218,0.038581&sll=4.18646,109.48935&sspn=17.593402,19.753418&oq=new+york&t=h&hnear=New+York,+United+States&z=15"><span class="gmap"></span></a>
</div>
</div>

</div>

<!-- BEGIN PAGE CONTENT -->
<div id="pg-content" class="clearfix">

<div class="one-half">
<div class="page-sub-title">
<h1>Email Us</h1>
</div>
<p>If you have any questions or comments regarding our services, please do not hesitate to tell us!</p>

    <p class="contact-form-sender">
    <input id="sender" type="text" placeholder="Name" name="sender" />
    </p>
    <p class="contact-form-email">
    <input id="email" type="text" placeholder="Email" name="email" />
    </p>
    <p class="contact-form-subject">
    <input id="subject" type="text" placeholder="Subject" name="subject" />
    </p>
    <p class="contact-form-content">
    <textarea id="contact-content" placeholder="Your enquiries" name="content"></textarea>
    </p>
    <p class="contact-form-checkbox">
    <input id="agreement" type="checkbox" value="true" />
    <label for="agreement">I have read and agree to the <a href="#">terms and conditions</a>.</label>
    </p>
    <span class="button-met dark"><input id="consubmit" type="submit" name="consubmit" value="Send" /></span>

</div>

<div class="one-half last">
<div class="page-sub-title">
<h1>Call Us</h1>
</div>

    <p class="hl2">Headquarters : +123-456-7890<br />
    London : +123-456-7890<br />
    New York : +123-456-7890
    </p>
    
<h3>Or Find Us Here :</h3>
        <div class="contact-social clearfix">
        <a href="#"><div id="contact-tw"></div></a>
        <a href="#"><div id="contact-fb"></div></a>
        <a href="#"><div id="contact-gp"></div></a>
        <a href="#"><div id="contact-be"></div></a>
        </div><!-- end .contact-social -->
</div>

</div><!-- end #pg-content -->
<!-- END PAGE CONTENT -->
</section>
<!-- END PAGE -->
</section>
<!-- END CONTENT -->

<!-- BEGIN FOOTER -->
<footer class="clearfix">

<div id="footer-social">
<a href="#"><span class="behance-mini"></span></a>
<a href="#"><span class="twitter-mini"></span></a>
<a href="#"><span class="facebook-mini"></span></a>
<a href="#"><span class="linkedin-mini"></span></a>
<a href="#"><span class="pinterest-mini"></span></a>
<a href="#"><span class="dribbble-mini"></span></a>
</div><!-- end #footer-social -->

<small>&copy; Copyright &copy; 2013.Company name All rights reserved.<a target="_blank" href="http://www.cssmoban.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a> - <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a></small>
</footer>
<!-- END FOOTER -->

</section><!-- end #container -->
</div>

</body>
</html>
